<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="changeSum">+1</button>
  <hr />

  <h2>当前姓名：{{ person.name }}</h2>
  <h2>当前年龄：{{ person.age }}</h2>
  <h2>当前汽车：{{ person.car.a }}、{{ person.car.b }}</h2>
  <button @click="changeName">改名字</button>
  <button @click="changeAge">改年龄</button>
  <button @click="changeCar('A')">改A车</button>
  <button @click="changeCar('B')">改B车</button>
  <button @click="changePerson">改整个</button>
  <hr />
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

// 监听ref基本数据类型
let sum = ref(0)
const changeSum = () => {
  sum.value += 1
}

watch(sum, (newVal, oldVal) => {
  console.log('newVal', newVal)
  console.log('oldVal', oldVal)
})

// // 监听ref对象类型
// let person = ref({
//   name: '张三',
//   age: 18
// })
// const changeName = () => {
//   person.value.name += '~'
// }
// const changeAge = () => {
//   person.value.age += 1
// }
// const changePerson = () => {
//   person.value = { name: '李四', age: 22 }
// }
// // 监视的是ref定义对象的地址值，不能监视内部数据变动，需要手动开启深度监视
// // 如果修改ref对象中的属性, newVal 和 oldVal 都是新值，因为他们是同一对象
// // 如果修改整个ref对象，能区分新旧，因为是不同对象了
// watch(
//   person,
//   (newVal, oldVal) => {
//     console.log('newVal', newVal)
//     console.log('oldVal', oldVal)
//   },
//   { deep: true }
// )

// 监听ref对象类型
let person = reactive({
  name: '张三',
  age: 18,
  car: {
    a: '大众',
    b: '宝马'
  }
})
const changeName = () => {
  person.name += '~'
}
const changeAge = () => {
  person.age += 1
}
const changeCar = (val) => {
  if (val === 'A') {
    person.car.a = '奔驰'
  } else if (val === 'B') {
    person.car.b = '奥迪'
  }
}

const changePerson = () => {
  person.car = { a: '雅迪', b: '兰博基尼' }
}
// 监视响应式对象数据中某个属性，
// 如果是基本数据类型，只能() => person.car
// 如果该属性是对象类型，虽然能直接写，但最好推荐写成函数式
// 写 person.car，那么修改整个会监视不到
// 写 () => person.car，那么修改整个监视不到
// 因此，要都能监视到，写 () => person.car 并开启深度监视

// 监视多个数据，写成数组形式
watch(
  [() => person.name, () => person.car],
  (newVal, oldVal) => {
    console.log('newVal', newVal)
    console.log('oldVal', oldVal)
  },
  { deep: true }
)
</script>

<style lang="scss" scoped></style>
